<div class="rect">
	<div class="title">
		<div class="order">2</div>
		<div class="text">商家图片</div>
		<div id="selectImg2" class="button2">选择图片</div><span class="img-size2">图片不大于2M（最多可上传6张）</span><span class="upload-pic-cover-text" onclick="showCoverBar()">自定义封面图</span>
	</div>
	<div class="upload-pic-bar">
		<div class="upload-pic-cover" id="uploadCover" style="display: none;">
			<div id="coverPicDiv" class="upload-pic-cover-img" style="background-image: url('static/pic/pc/logo_default.jpg')" onmouseover="showCoverBtn('')" onmouseout="showCoverBtn('none')">
				<div id="selectCoverImg" class="upload-pic-cover-edit" style="display: none;">选图</div>
				<div id="deleteCoverImg" class="upload-pic-cover-delete" style="display: none;" onclick="deleteCover()">删除</div>
			</div>
		</div>
		<div class="upload-pic-album" id="uploadImgBox"></div>
	</div>
</div>
<input type="text" id="coverPicId" class="display-none" />

<script type="text/javascript">
	var coverFile = '';
	var fileList = {};
	var fileNum = 0;
    layui.use('upload', function() {
        var upload = layui.upload;
        var uploadCover = upload.render({
            elem: '#selectCoverImg', 
            accept: 'images', 
            acceptMime: 'image/*', 
            auto: false, 
            size: 500, 
            choose: function(obj) {
                obj.preview(function(index, file, result) {
                    getItem('coverPicDiv').style.backgroundImage = 'url("' + result + '")';
                    coverFile = result;

                    var elements = document.querySelectorAll('.upload-cover-btn-selected');
					if (elements != null && elements.length > 0) {
						for (var i = 0; i < elements.length; i++) {
							elements[i].className = 'upload-cover-btn';
						}
					}
                    setValue('coverPicId', '');
                });
            }, 
        });

        var uploadInst2 = upload.render({
			elem: '#selectImg2', 
			accept: 'images', 
			acceptMime: 'image/*', 
			auto: false, 
		  	size: 2048, 
		  	choose: function(obj) {
		  		obj.preview(function(index, file, result) {
		  			var newPic = '';
		  			var uuid = getUUID();
		  			var picCount = document.querySelectorAll('.upload-img').length;
		  			fileList[uuid] = encodeURIComponent(result);

		  			newPic += '<div class="upload-img" style="background-image: url(\'' + result + '\');" draggable="true" ondragstart="startDragPic(this)" ondrop="stopDragPic(this)" ondragover="event.preventDefault();" ly-id="' + picCount + '">';
		  			newPic += '<img src="static/pic/pc/delete.png" class="button4" onclick="deletePic(this, \'' + uuid + '\')" />';
		  			newPic += '<div class="upload-cover-btn" onclick="setCoverPic(this, \'' + uuid + '\')">封面</div>';
		  			newPic += '</div>';
		  			setHtml('uploadImgBox', getHtml('uploadImgBox') + newPic);

		  			fileNum++;
		  			if (fileNum >= 6) {
		  				setDisplay('selectImg2', 'none');
		  			}
		  		});
		  	}
		});
    });

    function deletePic(obj, index) {
		delete fileList[index];
		obj.parentNode.parentNode.removeChild(obj.parentNode);

		fileNum--;
		if (fileNum < 6) {
			setDisplay('selectImg2', '');
		}

		if (index == getValue('coverPicId')) {
			setValue('coverPicId', '');
			getItem('coverPicDiv').style.backgroundImage = 'url("static/pic/pc/logo_default.jpg")';
	        coverFile = '';
		}
	}

	function setCoverPic(obj, uuid) {
		if (obj.className == 'upload-cover-btn-selected') {
			obj.className = 'upload-cover-btn';
			setValue('coverPicId', '');

			getItem('coverPicDiv').style.backgroundImage = 'url("static/pic/pc/logo_default.jpg")';
            coverFile = '';
		}
		else {
			var elements = document.querySelectorAll('.upload-cover-btn-selected');
			if (elements != null && elements.length > 0) {
				for (var i = 0; i < elements.length; i++) {
					elements[i].className = 'upload-cover-btn';
				}
			}

			obj.className = 'upload-cover-btn-selected';
			setValue('coverPicId', uuid);

			var image = obj.parentNode.style.backgroundImage;
			getItem('coverPicDiv').style.backgroundImage = image;
            coverFile = image;
		}
	}

	function showCoverBar() {
		var obj = getItem('uploadCover');
		if (obj.style.display == '') {
			setDisplay('uploadCover', 'none');
		}
		else {
			setDisplay('uploadCover', '');
		}
	}

	function showCoverBtn(status) {
		setDisplay('selectCoverImg', status);
		setDisplay('deleteCoverImg', status);
	}

	function deleteCover() {
		var elements = document.querySelectorAll('.upload-cover-btn-selected');
		if (elements != null && elements.length > 0) {
			for (var i = 0; i < elements.length; i++) {
				elements[i].className = 'upload-cover-btn';
			}
		}

		setValue('coverPicId', '');
		getItem('coverPicDiv').style.backgroundImage = 'url("static/pic/pc/logo_default.jpg")';
        coverFile = '';
	}

	var dragFromPicId = '';
	var dragToPicId = '';
	function startDragPic(obj) {
		dragFromPicId = parseInt(obj.getAttribute('ly-id'));
	}

	function stopDragPic(obj) {
		dragToPicId = parseInt(obj.getAttribute('ly-id'));

		var picCount = document.querySelectorAll('.upload-img').length;
		var parent = obj.parentNode;
		if (dragFromPicId == dragToPicId) {
			return;
		}
		else if (dragToPicId == picCount - 1) {
			parent.appendChild(parent.children[dragFromPicId]);
		}
		else {
			if (dragFromPicId > dragToPicId) {
				parent.insertBefore(parent.children[dragFromPicId], parent.children[dragToPicId]);
			}
			else {
				parent.insertBefore(parent.children[dragFromPicId], parent.children[dragToPicId + 1]);
			}
		}

		//重新给图片的ly-id按顺序赋值
		for (var i = 0; i < picCount; i++) {
			parent.children[i].setAttribute('ly-id', i);
		}

		//重新调整图片数组的元素位置
		adjustPicArray(dragFromPicId, dragToPicId);
	}

	function adjustPicArray(fromPicId, toPicId) {
		var index = 0;
		var fromPicKey = '';
		var fromPicValue = '';
		var newList = {};

		//先取出from元素的key与value
	    for (var key in fileList) {
	    	if (index == fromPicId) {
	    		fromPicKey = key;
	    		fromPicValue = fileList[key];
	    		break;
	    	}
	    	else {
	    		++index;
	    	}
	    }

	    //再取出to元素及其后的key与value（from元素除外）
	    index = 0;
	    for (var key in fileList) {
	    	if (fromPicId > toPicId) {
	    		if (index == fromPicId) {
		    	}
		    	else if (index >= toPicId) {
		    		newList[key] = fileList[key];
		    	}
	    	}
	    	else {
	    		if (index == fromPicId) {
		    	}
		    	else if (index > toPicId) {
		    		newList[key] = fileList[key];
		    	}
	    	}
	    	
	    	++index;
	    }

	    //删除from元素、to元素及其后的key与value
	    delete fileList[fromPicKey];
	    for (var key in newList) {
	    	delete fileList[key];
	    }

	    //原数组中先添加from元素，再添加to元素及其后的key与value
	    fileList[fromPicKey] = fromPicValue;
	    for (var key in newList) {
	    	fileList[key] = newList[key];
	    }
	}

	function loadPicList(picList) {
		var picHtml = '';
        for (var i = 0; i < picList.length; i++) {
            fileList[picList[i].picid] = picList[i].path;

            picHtml += '<div class="upload-img" style="background-image: url(\'' + picList[i].path + '\');" draggable="true" ondragstart="startDragPic(this)" ondrop="stopDragPic(this)" ondragover="event.preventDefault();" ly-id="' + i + '">';
            picHtml += '<img src="static/pic/pc/delete.png" class="button4" onclick="deletePic(this, \'' + picList[i].picid + '\')" />';
            picHtml += '<div class="' + (picList[i].iscover == '1' ? 'upload-cover-btn-selected' : 'upload-cover-btn') + '" onclick="setCoverPic(this, \'' + picList[i].picid + '\')">封面</div>';
            picHtml += '</div>';

            if (picList[i].iscover == '1') {
            	setValue('coverPicId', picList[i].picid);
            }
        }
        fileNum = picList.length;
        if (fileNum >= 6) {
            setDisplay('selectImg2', 'none');
        }
        setHtml('uploadImgBox', picHtml);

        if (info.coverpic != null && info.coverpic != '') {
        	getItem('coverPicDiv').style.backgroundImage = 'url("' + info.coverpic + '")';
            coverFile = info.coverpic;
        }
	}
</script>

<style type="text/css">
	.upload-pic-bar
	{
		margin: 0px 20px 0px 20px;
		display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: stretch;
	}

	.upload-pic-cover
	{
		-webkit-flex: none;
		width: 132px;
	}

	.upload-pic-album
	{
		-webkit-flex: auto;
		font-size: 0px;
	}

	.upload-pic-cover-img
	{
		width: 112px;
		height: 80px;
		background-size: cover;
		background-position: center;
	}

	.upload-pic-cover-edit
	{
		width: 56px;
		height: 20px;
		line-height: 20px;
		color: #333333;
	    font-size: 12px;
	    text-align: center;
	    background-color: #F2F2F2;
	    margin-top: 60px;
	    float: left;
	    cursor: pointer;
	}

	.upload-pic-cover-delete
	{
		width: 56px;
		height: 20px;
		line-height: 20px;
		color: white;
	    font-size: 12px;
	    text-align: center;
	    background-color: #FF0000;
	    margin-top: 60px;
	    float: left;
	    cursor: pointer;
	}
	
	.upload-cover-btn, .upload-cover-btn-selected
	{
		width: 40px;
	    height: 20px;
	    line-height: 20px;
	    color: #333333;
	    font-size: 12px;
	    text-align: center;
	    background-color: #F2F2F2;
	    margin-top: 60px;
	    float: left;
	    cursor: pointer;
	}

	.upload-cover-btn-selected
	{
		color: white;
		background-color: #21A0F7;
	}

	.upload-pic-cover-text
	{
		color: #337ab7;
		font-size: 14px;
		height: 60px;
		line-height: 60px;
		margin-left: 60px;
		cursor: pointer;
	}
</style>